<template>
	<!-- form 查询表单 -->
	<el-form style="padding-bottom: 10px;"
		ref="selectFormRef"
		:model="music" 
		label-width="auto" 
		label-position="right" 
	>
		<el-row :gutter="20">
			<el-col :span="8">
				<el-form-item label="歌手" prop="music_author">
					<el-input v-model="music.music_author" placeholder="支持模糊查询" clearable/>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="歌名" prop="music_name">
					<el-input v-model="music.music_name" placeholder="支持模糊查询" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="类别" prop="music_type">
					<el-select v-model="music.music_type" placeholder="请选择" clearable>
						<el-option label="华语" value="1" />
						<el-option label="日韩" value="2" />
						<el-option label="欧美" value="3" />
						<el-option label="其他" value="4" />
						<el-option label="纯音乐" value="5" />
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-button type="primary" @click="doList">查询</el-button>
				<el-button type="default" @click="doFormReset">重置</el-button>
			</el-col>
		</el-row>
	</el-form>
<!-- 	table 数据表格 -->
	<el-row>
		<el-col :span="24">
			<el-table :header-cell-style="{backgroundColor:'#F4F7FA',color:'gray'}"
				:data="tableData"
				stripe
				show-overflow-tooltip
			>
			    <el-table-column type="index" width="50"/>
				<el-table-column prop="music_id" label="歌曲编号" sortable />
				<el-table-column prop="music_name" label="歌名" sortable />
				<el-table-column prop="music_author" label="歌手" sortable />
				<el-table-column prop="music_type" label="类型" sortable >
					<template #default="scope">
						<span v-if="scope.row.music_type === 4">其他</span>
						<span v-if="scope.row.music_type  === 1">华语</span>
						<span v-if="scope.row.music_type === 2">日韩</span>
						<span v-if="scope.row.music_type === 3">欧美</span>
						<span v-if="scope.row.music_type === 5">纯音乐</span>
					</template>
				</el-table-column>
				<el-table-column prop="music_state" label="状态" sortable>
				  <template #default="scope">
				    <span v-if="scope.row.music_state === 3">待审核</span>
				    <span v-if="scope.row.music_state  === 1">发布</span>
				    <span v-if="scope.row.music_state === 2">违规</span>
				  </template>
				</el-table-column>
				<el-table-column prop="music_user_name" label="发帖人" sortable/>
				<el-table-column label="取消热门" fixed="right" width="230">
					<template #default="scope">
						<el-button type="danger" :icon="CloseBold" circle  @click="submitNoPass(scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination style="float:right"
			      v-model:current-page="page.pageNum"
			      v-model:page-size="page.pageSize"
			      :page-sizes="[5, 10, 20, 50]"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="page.total"
			      @change="doList"
			/>
		</el-col>
	</el-row>
	
	<!-- 详情页面 -->
	<detail-page ref="detailPageRef" @flushPage="doFlushPage" ></detail-page>
	
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { ElMessage,FormInstance } from 'element-plus'
import { CloseBold } from '@element-plus/icons-vue'
//------------------------- from 表单 -----------------------------
// 查询条件
const music = ref({
	music_rm:1, //是否热门
	music_type:null, //音乐类型
	music_name:'', //音乐名称
	music_author:'' ,//音乐作者
	music_state:1,
})

//取消热门传到后端的数据
// const nopass_music =ref({
// 	music_rm:null,
// 	music_id:null,
// 	music_name:'',
// 	music_file:'',
// 	music_gc:'',
// 	music_author:'',
// 	music_type:null,
// 	music_tu:null,
// 	music_sc:null,
// 	music_url:'',
// 	music_level:null,
// 	music_state:null,
// 	music_img:'',
// 	music_date:'',
// 	music_time:'',
// 	music_user_name:'',
// })

// -------------------------- table 表格----------------------------
// 表格数据
const tableData = ref([
	
]);

// 分页信息
const page = ref({
	pageNum: 1,
	pageSize: 5,
	pages:0,
	total:0
})

const doPageReset = ()=>{
	page.value.pageNum = 1;
	page.value.pageSize = 5;
}
// 声明一个表单实例的ref
const selectFormRef = ref<FormInstance>()
// 重置表单的函数
const doFormReset = ()=>{
	// 重置表单字段
	selectFormRef.value.resetFields()
	// 重置页面状态
	doPageReset();
}
//--------------------------- CRUD ---------------------------
// 查询
const doList = ()=>{
	axios({
		url:'/api/music/list',
		method:'GET',
		params: Object.assign({},music.value,{pageNum:page.value.pageNum, pageSize:page.value.pageSize})
	}).then(response => {
		tableData.value = response.data.list;
		page.value.pages = response.data.pages;
		page.value.total = response.data.total;
	});
}


// 取消热门
const submitNoPass = (obj) => {
	obj.music_rm=2;
  axios({
  	url:'/api/music',
  	method:'Put',
  	params:Object.assign({},obj)
  }).then( response => {
  	if(response.data === true){
  		ElMessage.success("操作成功！");
  		doFlushPage();
  	}else{
  		ElMessage.error("操作失败！");
  	}
  });
 
}

const doFlushPage = ()=>{
	doList();
	doPageReset();

}

onMounted(()=>{
	doList();
});

</script>

<style scoped>
</style>